<!-- CoachesList.vue -->
<template>
  <div class="coaches-container">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">预约教练</span>
          <div class="header-controls">
            <el-input
              v-model="searchQuery"
              placeholder="搜索教练姓名"
              style="width: 220px; margin-right: 15px;"
              clearable
              @input="handleSearchInput"
              @clear="handleSearchClear"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>

      <el-table
        :data="filteredCoaches"
        style="width: 100%"
        class="coaches-table"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        border
      >
        <el-table-column prop="fullname" label="姓名" width="100" />
        <el-table-column prop="specialization" label="专长" min-width="120" />
        <el-table-column prop="years_of_experience" label="教学经验" width="100" align="center">
          <template #default="scope">
            {{ scope.row.years_of_experience }}年
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分" width="100" align="center">
          <template #default="scope">
            <el-rate v-model="scope.row.rating" disabled show-score />
          </template>
        </el-table-column>
        <el-table-column prop="available_times" label="可预约时间" width="160">
          <template #default="scope">
            <div class="tag-scroll-container">
              <template v-if="scope.row.available_times.length && typeof scope.row.available_times[0] === 'object'">
                <el-tag
                  v-for="(time, index) in scope.row.available_times.slice(0, 3)"
                  :key="index"
                  class="tag-style"
                  :class="{ 'tag-disabled': time.is_active === false }"
                  size="small"
                >
                  {{ time.label }}
                </el-tag>
                <div v-if="scope.row.available_times.length > 3" class="more-times">
                  +{{ scope.row.available_times.length - 3 }} more
                </div>
              </template>
              <template v-else>
                <el-tag class="tag-style" v-for="(time, index) in scope.row.available_times.slice(0, 3)" :key="index" size="small">
                  {{ time }}
                </el-tag>
                <div v-if="scope.row.available_times.length > 3" class="more-times">
                  +{{ scope.row.available_times.length - 3 }} more
                </div>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right" align="center">
          <template #default="scope">
            <el-button size="small" @click="viewCoachDetail(scope.row)" class="btn-style">
              查看详情
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="showAppointmentDialog(scope.row)"
              class="btn-style"
            >
              预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalCoaches"
          layout="total, sizes, prev, pager, next, jumper"
          background
        />
      </div>
    </el-card>

    <!-- 教练详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="教练详情" width="50%">
      <div v-if="selectedCoach" class="coach-detail">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-image
              style="width: 100%; height: 200px"
              :src="selectedCoach.avatar || defaultAvatar"
              fit="cover"
            />
            <h3 style="text-align: center; margin-top: 10px">
              {{ selectedCoach.fullname }}
            </h3>
            <el-rate
              v-model="selectedCoach.rating"
              disabled
              show-score
              style="display: block; margin: 0 auto"
            />
          </el-col>
          <el-col :span="16">
            <el-descriptions :column="1" border class="description-style">
              <el-descriptions-item label="教学经验">
                {{ selectedCoach.years_of_experience }}年
              </el-descriptions-item>
              <el-descriptions-item label="专长领域">
                {{ selectedCoach.specialization }}
              </el-descriptions-item>
              <el-descriptions-item label="教学风格">
                {{ selectedCoach.style || '暂无信息' }}
              </el-descriptions-item>
              <el-descriptions-item label="学员评价">
                <div v-if="selectedCoach.comments && selectedCoach.comments.length > 0">
                  <div
                    v-for="(comment, index) in selectedCoach.comments"
                    :key="index"
                    class="comment-item"
                  >
                    <p class="comment-content">{{ comment.content || '暂无评价' }}</p>
                    <p class="comment-meta">
                      {{ comment.student || '匿名学员' }} - {{ comment.time || '未知时间' }}
                    </p>
                  </div>
                </div>
                <div v-else>
                  <p class="no-comment">暂无学员评价</p>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <!-- 预约对话框 -->
    <el-dialog v-model="appointmentDialogVisible" title="训练预约" width="50%">
      <el-form
        v-if="selectedCoach"
        :model="appointmentForm"
        label-width="100px"
        :rules="appointmentRules"
        ref="appointmentFormRef"
        class="form-style"
      >
        <el-form-item label="教练姓名">
          <el-input v-model="selectedCoach.fullname" disabled />
        </el-form-item>
        <el-form-item label="预约日期" prop="date">
          <el-date-picker
            v-model="appointmentForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
            @change="onDateChange"
          />
        </el-form-item>

        <el-form-item label="可选时间段" prop="schedule">
          <el-select
            v-model="selectedSchedule"
            placeholder="请选择时间段"
            style="width: 100%"
            @change="onScheduleChange"
            :disabled="coachSchedules.length === 0"
          >
            <el-option
              v-for="schedule in coachSchedules"
              :key="`${schedule.start_time}-${schedule.end_time}`"
              :label="`${schedule.start_time} - ${schedule.end_time}`"
              :value="`${schedule.start_time}-${schedule.end_time}`"
            />
          </el-select>
          <div v-if="coachSchedules.length === 0 && appointmentForm.date" class="el-form-item-tip">
            该日期暂无排班时间
          </div>
        </el-form-item>

        <el-form-item label="开始时间" prop="start_time">
          <el-time-picker
            v-model="appointmentForm.start_time"
            value-format="HH:mm:ss"
            placeholder="选择时间"
            style="width: 100%"
            :disabled="!!selectedSchedule"
            @change="onTimeChange"
          />
        </el-form-item>

        <el-form-item label="结束时间" prop="end_time">
          <el-time-picker
            v-model="appointmentForm.end_time"
            value-format="HH:mm:ss"
            placeholder="选择时间"
            style="width: 100%"
            :disabled="!!selectedSchedule"
            @change="onTimeChange"
          />
        </el-form-item>

        <el-form-item label="训练项目" prop="program">
          <el-select
            v-model="appointmentForm.program"
            placeholder="选择训练项目"
            style="width: 100%"
          >
            <el-option
              v-for="program in trainingPrograms"
              :key="program.program_id"
              :label="program.name"
              :value="program.program_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="note">
          <el-input
            v-model="appointmentForm.note"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="appointmentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAppointment" :loading="submittingAppointment">
            确认预约
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import requestUtil from '@/util/request.js'
import requestUtil1 from '@/util/requestNew.js'
import { ElMessage } from 'element-plus'
import debounce from 'lodash/debounce'
import defaultAvatar from '@/assets/Mihu.png'

// 教练数据
const allCoaches = ref([]) // 存储所有教练数据
const coaches = ref([]) // 存储当前显示的教练数据（分页后）
const loading = ref(false)
const submittingAppointment = ref(false)

// 搜索和分页
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalCoaches = ref(0)

// 计算属性：过滤教练数据
const filteredCoaches = computed(() => {
  // 由于我们已经通过 fetchCoaches 获取了当前页的数据，直接返回即可
  return allCoaches.value
})


// 获取教练列表 - 根据分页参数获取数据
const fetchCoaches = async () => {
  loading.value = true
  try {
    // 根据当前分页参数获取数据 - 修复参数传递方式
    const params = {
      page: currentPage.value,
      page_size: pageSize.value
    }

    // 只有在有搜索内容时才添加搜索参数
    if (searchQuery.value) {
      params.search = searchQuery.value  // 确保参数名与后端一致
    }

    console.log('发送请求参数:', params);  // 调试日志

    const response = await requestUtil1.get('/coach/msg/msg', params)

    console.log('收到响应:', response);  // 调试日志

    if (response.data?.status === 200) {
      const responseData = response.data.data

      // 为每个教练获取可预约时间
      const coachesWithSchedules = await Promise.all(
        (responseData.list || responseData).map(async (coach) => {
          try {
            // 获取教练的排班时间
            const scheduleResponse = await requestUtil.get(`/schedule/msg/${coach.coach_id}`)
            // 确保 schedules 是数组
            let schedules = []
            if (scheduleResponse.data) {
              if (Array.isArray(scheduleResponse.data)) {
                schedules = scheduleResponse.data
              } else if (scheduleResponse.data.data) {
                if (Array.isArray(scheduleResponse.data.data)) {
                  schedules = scheduleResponse.data.data
                } else if (scheduleResponse.data.data.list && Array.isArray(scheduleResponse.data.data.list)) {
                  schedules = scheduleResponse.data.data.list
                }
              }
            }

            const processedSchedules = schedules.length > 0
              ? schedules.map(schedule => ({
                  ...schedule,
                  start_time: secondsToTimeString(schedule.start_time),
                  end_time: secondsToTimeString(schedule.end_time),
                  is_active: schedule.is_active
                }))
              : []

            const availableTimes = processedSchedules.length > 0
              ? processedSchedules.map(schedule => ({
                  label: `${getDayOfWeekLabel(schedule.day_of_week)} ${schedule.start_time}-${schedule.end_time}`,
                  is_active: schedule.is_active
                }))
              : ['暂无排班信息']

            // 获取教练评分
            const coachRating = await fetchCoachRating(coach.coach_id)

            return {
              ...coach,
              rating: coachRating,
              available_times: availableTimes
            }
          } catch (error) {
            console.error(`获取教练 ${coach.coach_id} 的排班时间失败:`, error)
            return {
              ...coach,
              available_times: ['暂无排班信息']
            }
          }
        })
      )

      console.log('coachesWithSchedules:', coachesWithSchedules)
      allCoaches.value = coachesWithSchedules
      coaches.value = coachesWithSchedules
      totalCoaches.value = responseData.total || coachesWithSchedules.length
      console.log('totalCoaches:', totalCoaches.value)
    } else {
      ElMessage.error('获取教练列表失败: ' + (response.data?.message || '未知错误'))
    }
  } catch (error) {
    console.error('获取教练列表失败:', error)
    console.error('错误详情:', error.response?.data);  // 更详细的错误信息
    ElMessage.error('获取教练列表失败: ' + (error.response?.data?.detail || error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}




// 修改分页相关函数
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchCoaches()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  fetchCoaches()
}

// 修改搜索相关函数
const handleSearchInput = debounce(() => {
  currentPage.value = 1
  fetchCoaches()
}, 300)


const handleSearchClear = () => {
  searchQuery.value = ''
  currentPage.value = 1
  fetchCoaches()
}


// 获取教练详情 - 直接使用 requestUtil
const getCoachDetail = async (coach_id) => {
  try {
    const response = await requestUtil.get(`/coach/msg/${coach_id}`)
    if (response.data?.status === 200) {
      return response.data.data
    } else {
      throw new Error(response.data?.message || '获取教练详情失败')
    }
  } catch (error) {
    throw error
  }
}

// 预约教练 - 直接使用 requestUtil
const bookCoach = async (appointmentData) => {
  try {
    const response = await requestUtil.post('/appointment/add', appointmentData)
    if (response.data?.status === 201) {
      return response.data.data
    } else {
      throw new Error(response.data?.message || '预约失败')
    }
  } catch (error) {
    throw error
  }
}

// 获取教练平均评分的通用函数
const fetchCoachRating = async (coachId) => {
  try {
    const trainingResponse = await requestUtil.get('/student_training/trainings')
    if (trainingResponse.data && trainingResponse.data.data) {
      const trainings = trainingResponse.data.data
      // 筛选该教练的训练记录
      const coachTrainings = trainings.filter(training => training.coach_id == coachId)

      let totalRating = 0
      let ratingCount = 0
      coachTrainings.forEach(training => {
        if (training.rating && training.rating > 0) {
          totalRating += training.rating
          ratingCount++
        }
      })

      const avgRating = ratingCount > 0 ? (totalRating / ratingCount) : 0
      return parseFloat(avgRating.toFixed(1))
    }
  } catch (trainingError) {
    console.warn('获取教练评分失败:', trainingError)
  }
  return 0
}



// 添加教练排班时间相关数据
const coachSchedules = ref([])
const selectedSchedule = ref('')

// 教练详情对话框
const detailDialogVisible = ref(false)
const selectedCoach = ref(null)

const viewCoachDetail = async (coach) => {
  try {
    selectedCoach.value = await getCoachDetail(coach.coach_id)
    // 获取教练评分
    const coachRating = await fetchCoachRating(coach.coach_id)
    // 更新选中教练的评分
    selectedCoach.value.rating = coachRating
    detailDialogVisible.value = true
  } catch (error) {
    console.error('获取教练详情失败:', error)
    ElMessage.error('获取教练详情失败')
  }
}

// 预约对话框
const appointmentDialogVisible = ref(false)
const appointmentFormRef = ref(null)
const appointmentForm = ref({
  date: '',
  start_time: '',
  end_time: '',
  program: '',
  note: ''
})

const timeStringToSeconds = (str) => {
  const [h, m, s] = str.split(':').map(Number);
  return h * 3600 + m * 60 + s;
};

// 修改 secondsToTimeString 函数以处理浮点数
const secondsToTimeString = (seconds) => {
  // 处理浮点数
  const totalSeconds = Math.floor(typeof seconds === 'string' ? parseFloat(seconds) : seconds)

  const h = String(Math.floor(totalSeconds / 3600)).padStart(2, '0')
  const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0')
  const s = String(totalSeconds % 60).padStart(2, '0')

  return `${h}:${m}:${s}`
}

// 动态获取训练项目
const trainingPrograms = ref([])

// 添加获取星期标签的函数
const getDayOfWeekLabel = (dayOfWeek) => {
  const dayMap = {
    '1': '周一',
    '2': '周二',
    '3': '周三',
    '4': '周四',
    '5': '周五',
    '6': '周六',
    '7': '周日'
  }
  return dayMap[dayOfWeek] || dayOfWeek
}

// 获取教练在指定日期的排班时间
const fetchCoachSchedules = async (coachId, date) => {
  try {
    // 根据日期计算星期几 (1-7, 周一到周日)
    const dayOfWeekMap = {
      1: '1', // 周一
      2: '2', // 周二
      3: '3', // 周三
      4: '4', // 周四
      5: '5', // 周五
      6: '6', // 周六
      0: '7' // 周日
    }

    const selectedDate = new Date(date)
    const dayOfWeek = dayOfWeekMap[selectedDate.getDay()]

    // 调用API获取教练在指定星期的排班时间
    const response = await requestUtil.get(`/schedule/msg/${coachId}/${dayOfWeek}`)

    // 处理时间格式转换，确保返回的是数组
    let schedules = []
    if (response.data) {
      if (Array.isArray(response.data)) {
        schedules = response.data
      } else if (response.data.data) {
        if (Array.isArray(response.data.data)) {
          schedules = response.data.data
        } else if (response.data.data.list && Array.isArray(response.data.data.list)) {
          schedules = response.data.data.list
        }
      }
    }

    // 将秒数转换为 HH:mm:ss 格式
    coachSchedules.value = schedules.map(schedule => {
      return {
        ...schedule,
        start_time: secondsToTimeString(schedule.start_time),
        end_time: secondsToTimeString(schedule.end_time)
      }
    })

    // 清空之前选择的时间段
    selectedSchedule.value = ''
  } catch (error) {
    console.error('获取教练排班时间失败:', error)
    ElMessage.error('获取教练排班时间失败: ' + (error.message || '未知错误'))
    coachSchedules.value = []
  }
}

// 禁用过去日期
const disabledDate = (date) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return date.getTime() < today.getTime()
}

// 当选择日期时获取教练排班时间
const onDateChange = async (val) => {
  appointmentForm.value.date = val
  if (val && selectedCoach.value) {
    await fetchCoachSchedules(selectedCoach.value.coach_id, val)
  } else if (!val) {
    // 如果清空了日期，也要清空排班时间
    coachSchedules.value = []
    selectedSchedule.value = ''
  }
}

// 当选择时间段时自动填充开始和结束时间
const onScheduleChange = (val) => {
  selectedSchedule.value = val

  if (val) {
    const schedule = coachSchedules.value.find(s =>
      `${s.start_time}-${s.end_time}` === val
    )

    if (schedule) {
      appointmentForm.value.start_time = schedule.start_time
      appointmentForm.value.end_time = schedule.end_time
      // 触发时间验证
      onTimeChange()
    }
  } else {
    // 如果清空了选择，也要清空时间
    appointmentForm.value.start_time = ''
    appointmentForm.value.end_time = ''
  }
}

const fetchTrainingPrograms = async () => {
  try {
    // 获取处于active状态的全部项目（后端已过滤）
    const response = await requestUtil.get('/program/msg', {
      params: {
        page: 1,
        page_size: 100
      }
    })

    // 获取当前学生已完成的训练项目
    const userId = localStorage.getItem('user_id')
    if (userId) {
      try {
        // 获取学生ID
        const studentResponse = await requestUtil.get(`/student/msg/userId/${userId}`)
        const studentData = studentResponse.data.data

        if (studentData && studentData.student_id) {
          const studentId = studentData.student_id

          // 获取该学生的所有训练记录
          const trainingResponse = await requestUtil.get(`/student_training/trainings/user/${userId}`)
          let trainings = []
          if (trainingResponse.data && trainingResponse.data.data) {
            if (Array.isArray(trainingResponse.data.data)) {
              trainings = trainingResponse.data.data
            } else if (trainingResponse.data.data.list && Array.isArray(trainingResponse.data.data.list)) {
              trainings = trainingResponse.data.data.list
            }
          }

          // 筛选出已完成的训练项目 (状态为 COMPLETED)
          const completedProgramIds = trainings
            .filter(training => training.status === 'COMPLETED')
            .map(training => training.program_id)

          // 过滤掉已完成的项目
          const availablePrograms = (response.data.data || response.data)
            .filter(program => !completedProgramIds.includes(program.program_id))

          trainingPrograms.value = availablePrograms
          return
        }
      } catch (trainingError) {
        console.warn('获取学生训练记录失败:', trainingError)
      }
    }

    // 如果获取学生训练记录失败，仍然显示所有active项目
    trainingPrograms.value = response.data.data || response.data
  } catch (error) {
    console.error('获取训练项目失败:', error)
    ElMessage.error('获取训练项目失败')
  }
}

// 添加时间验证函数
const validateAppointmentTime = () => {
  if (!appointmentForm.value.date || !appointmentForm.value.start_time) {
    return { valid: true, message: '' }
  }

  const now = new Date()
  const startDateTimeStr = `${appointmentForm.value.date} ${appointmentForm.value.start_time}`
  const startDateTime = new Date(startDateTimeStr)

  // 检查预约时间是否大于当前时间
  if (startDateTime <= now) {
    return { valid: false, message: '预约开始时间必须大于当前时间' }
  }

  // 如果结束时间已选择，检查结束时间是否晚于开始时间
  if (appointmentForm.value.end_time) {
    const endDateTimeStr = `${appointmentForm.value.date} ${appointmentForm.value.end_time}`
    const endDateTime = new Date(endDateTimeStr)

    if (endDateTime <= startDateTime) {
      return { valid: false, message: '结束时间必须晚于开始时间' }
    }
  }

  return { valid: true, message: '' }
}

// 监听时间选择变化，实时验证
const onTimeChange = () => {
  const validation = validateAppointmentTime()
  if (!validation.valid) {
    ElMessage.warning(validation.message)
  }
}

const appointmentRules = {
  date: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
  start_time: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  end_time: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  program: [{ required: true, message: '请选择训练项目', trigger: 'change' }]
}

// 显示预约对话框
const showAppointmentDialog = async (coach) => {
  selectedCoach.value = coach
  appointmentForm.value = {
    date: '',
    start_time: '',
    end_time: '',
    program: '',
    note: ''
  }
  // 清空排班时间相关数据
  coachSchedules.value = []
  selectedSchedule.value = ''
  // 获取训练项目（如果还没有数据）
  if (trainingPrograms.value.length === 0) {
    await fetchTrainingPrograms()
  }

  appointmentDialogVisible.value = true
}

// 获取学生ID
const fetchStudent_id = async () => {
  try {
    // 从本地存储获取 user_id
    const userId = localStorage.getItem('user_id')

    if (!userId) {
      ElMessage.error('未找到用户信息，请重新登录')
      return null
    }

    // 调用API获取学生ID
    const response = await requestUtil.get(`/student/msg/userId/${userId}`)
    if (response.data.data && response.data.data.student_id) {
      return response.data.data.student_id
    } else {
      ElMessage.error('获取学生信息失败')
      return null
    }
  } catch (error) {
    console.error('获取学生ID失败:', error)
    ElMessage.error('获取学生ID失败: ' + (error.message || '未知错误'))
    return null
  }
}

const submitAppointment = () => {
  appointmentFormRef.value.validate(async (valid) => {
    if (valid) {
      submittingAppointment.value = true
      try {
        // 最终时间验证
        const validation = validateAppointmentTime()
        if (!validation.valid) {
          ElMessage.error(validation.message)
          submittingAppointment.value = false
          return
        }

        // 检查是否选择了结束时间
        if (!appointmentForm.value.end_time) {
          ElMessage.error('请选择结束时间')
          submittingAppointment.value = false
          return
        }

        // 调用函数获取 student_id
        const studentId = await fetchStudent_id()
        // 检查是否成功获取到 student_id
        if (!studentId) {
          submittingAppointment.value = false
          return
        }

        const appointmentData = {
          coach_id: selectedCoach.value.coach_id,
          student_id: studentId,
          appointment_date: appointmentForm.value.date,
          start_time: appointmentForm.value.start_time,
          end_time: appointmentForm.value.end_time,
          program_id: appointmentForm.value.program,
        }
        await bookCoach(appointmentData)
        ElMessage.success('预约成功')
        appointmentDialogVisible.value = false
        // 重新加载教练列表以更新可预约时间
        await fetchCoaches()
      } catch (error) {
        console.error('预约失败:', error)
        ElMessage.error('预约失败')
        if (error.response && error.response.data) {
          ElMessage.error('预约失败: ' + (error.response.data.detail || JSON.stringify(error.response.data)))
        } else {
          ElMessage.error('预约失败: ' + (error.message || '未知错误'))
        }
      } finally {
        submittingAppointment.value = false
      }
    }
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchCoaches()
  // 初始加载训练项目
  fetchTrainingPrograms()
})
</script>

<style scoped>
.coaches-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.main-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-controls {
  display: flex;
  align-items: center;
}

.coaches-table {
  margin-top: 20px;
}

.tag-disabled {
  background-color: #f5f5f5 !important;
  color: #bbb !important;
  border-color: #ddd !important;
  cursor: not-allowed;
}

.tag-scroll-container {
  max-height: 60px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tag-scroll-container::-webkit-scrollbar {
  display: none;
}

.tag-style {
  font-size: 11px;
  height: 20px;
  line-height: 18px;
  padding: 0 6px;
  margin-bottom: 3px;
}

.more-times {
  font-size: 11px;
  color: #999;
  text-align: center;
  padding: 2px 0;
}

.btn-style {
  margin-right: 5px;
}

.btn-style:last-child {
  margin-right: 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.coach-detail {
  padding: 20px;
}

.description-style {
  margin-top: 20px;
}

.comment-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.comment-content {
  margin: 5px 0;
  color: #333;
}

.comment-meta {
  margin: 5px 0;
  font-size: 12px;
  color: #999;
  text-align: right;
}

.no-comment {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px 0;
}

.form-style {
  max-width: 600px;
  margin: 0 auto;
}

.el-form-item-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

:deep(.el-table th) {
  font-weight: 600;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}
</style>
